import React, { useState, useEffect } from "react";
import TopNav from "../../../components/topNav";
import userimg from '../../../assets/hdpi/user.jpg'
import { Cell, Image } from "react-vant";
import "./index.css";
import { useNavigate } from "react-router-dom";

interface UserInfo {
  email: string;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState<UserInfo>({
    email: "用户"
  });

  useEffect(() => {
    const users = localStorage.getItem("userInfo");
    if (users) {
      try {
        const parsedUserInfo = JSON.parse(users);
        setUserInfo({
          email: parsedUserInfo.email || "用户"
        });
      } catch (error) {
        console.error('解析用户信息失败:', error);
        setUserInfo({
          email: "用户"
        });
      }
    }
  }, []);

  const closeLogin = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("userInfo");
    navigate("/login");
  };
  return (
    // 排版
    <div className="setting_box">
      <TopNav title="设置" />
      <div className="setting_box_cotent">
        <Cell.Group>
          <Cell
            center
            key={1}
            title={userInfo.email}
            icon={<Image width={54} height={54} src={userimg} round />}
            isLink
            size="large"
          />
        </Cell.Group>
        <Cell.Group>
          <Cell center title={"修改密码"} size="large" isLink />
        </Cell.Group>
        <Cell.Group>
          <Cell center title={"清除缓存"} size="large" isLink />
          <Cell center title={"屏幕亮度"} size="large" isLink />
          <Cell center title={"版本检测"} size="large" isLink />
        </Cell.Group>
        <Cell.Group>
          <Cell center title={"帮助中心"} size="large" isLink />
          <Cell center title={"关于我们"} size="large" isLink />
        </Cell.Group>
        <Cell.Group>
          <Cell center title={"邀请好友"} size="large" isLink />
        </Cell.Group>
        <div className="setting_box_bot">
          <span className="closeLogin" onClick={closeLogin}>
            退出登录
          </span>
        </div>
      </div>
    </div>
  );
};

export default Index;
